<template>
  <el-dialog
      v-model="centerDialogVisible"
      :title="formTitle"
      width="80%"
      top="40px"
      destroy-on-close
      center
      @close="dialogClose">
    <div id="map" style="height: 700px"></div>
    <div class="info">
      <div class="input-serch">
        <div class="input-serch-prepend">
          <span class="input-serch-title">关键字</span>
        </div>
        <input id="tipinput" autocomplete="off" v-on:input="checkInputValue()"
               type="text">
      </div>
      <div class="searchData-box">
        <ul id="searchDataList">
        </ul>
      </div>
    </div>
    <div class="input-card w200">
      <span>编辑区域</span>
      <div class="input-item bottomButton" style="  margin-top: 30px;">
        <el-button class="affirm" @click="setPosition" style="width: 45.5%;height: 100%;">确认</el-button>
        <el-button class="cancel" @click="dialogClose" style="width: 45.5%;height: 100%;">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import _ from "underscore";

let me;
let map;
let autocompleteService;
let marker;

export default {
  name: "SetOptionDialog",
  data() {
    return {
      formTitle: '',
      centerDialogVisible: false
    }
  },
  methods: {
    showDialog(lng, lat) {
      me = this;
      this.centerDialogVisible = true;
      this.$nextTick(() => {
        if (lng == '' || lng == undefined) {
          lng = 116.45;
          lat = 39.93;
        }
        this.initMap(lng, lat);
      });
    },
    setPosition() {
      let position = marker.getPosition();
      me.$parent.setFormLabelAlignData(position);
      me.centerDialogVisible = false;
    },
    initMap(lng, lat) {
      var position = new LKMap.LngLat(lng, lat);
      map = new LKMap.Map("map", {
        center: position,
        zoom: 10,
        style: 'lkmap://styles/f7b8570740b54c40a5b98fdfb5d688c2',
      });
      marker = new LKMap.Marker({
        position: position,
        anchor: 'bottom',
        draggable: true,    // 默认禁止拖拽
      });
      marker.setMap(map);
      map.on('click', function (e) {
        var position = new LKMap.LngLat(e.lngLat.lng, e.lngLat.lat);
        marker.setPosition(position);

      });

      map.on('load', function () {
        autocompleteService = new LKMap.Autocomplete({
          size: 10,
        });
      });
    },
    addList(result) {
      let searchDataList = document.getElementById('searchDataList')
      searchDataList.innerHTML = "";
      _.forEach(result, function (item) {
        var liItem = document.createElement('li')
        liItem.onclick = function () {
          let lng = item.coordinates[0],
              lat = item.coordinates[1]
          var position = new LKMap.LngLat(lng, lat);
          marker.setPosition(position)
          map.setCenter({lng, lat});
          searchDataList.innerHTML = "";
          document.getElementById("tipinput").value = "";
        }
        liItem.innerHTML = item.properties.name + '<br><span>' + item.properties.label + '</span>';
        searchDataList.appendChild(liItem);
      })
    },
    // 监听输入框
    checkInputValue() {
      let searchDataList = document.getElementById('searchDataList')
      var keyword = document.getElementById("tipinput").value;
      if (keyword == "") {
        searchDataList.innerHTML = "";
      }
      autocompleteService.search(keyword, function (status, result) {
        me.addList(result);	// 渲染列表
      });
    },
    dialogClose() {
      map && map.destroy();
      map = null;
      me.centerDialogVisible = false;
    }
  }
}
</script>

<style scoped lang="scss">

</style>